<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>微信支付页面</title>

	<script src="${pageContext.request.contextPath}/js/qrcode.js"></script>
	<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>


	<script>
		let timer ;
        window.onload=function (ev) {

            new QRCode(document.getElementById('qrcode'), "${payStr}");


            // 开启定时器, 每隔 2秒 发送ajax请求 获取支付状态
			timer = setInterval(checkState,2000)
        }
        // 发送ajax请求 获取支付状态
		function checkState() {

        	//1.url
			let url = "${pageContext.request.contextPath}/payServlet"
			//2.参数
			let params={
				"method":"getOrderState",
				"oid":"${order.oid}",
				"time":new Date().getTime()+""
			}
			//3.callback 回调
			let callback = function (rel) {
				console.log(rel)
				if(rel.flag == true){
					// 支付成功
					// 清除定时器
					clearInterval(timer)
					// 页面跳转到successjsp
					location.href="${pageContext.request.contextPath}/jsp/paySuccess.jsp"
				}else {
					// 支付失败
				}
			}
			//4.发射
			$.post(url,params,callback,"json")
		}

	</script>


</head>
<body>
<!-- 确认支付form -->
	<h3>订单号：${order.oid},付款金额 ：0.01元</h3>
	<h3>收货人姓名: ${order.name}</h3>
	<h3>收货人地址: ${order.address}</h3>
	<h3>收货人电话: ${order.telephone}</h3>
	<hr>
	<h1>微信支付-付款码</h1>
	<div id="qrcode"></div>
</body>
</html>